
const path 				= require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack           = require('webpack');

module.exports = {
	mode   : 'development',
	entry  : './src/app.jsx',
	output : {
		path      : path.resolve(__dirname, './dist'),
		publicPath: '/dist/',
		filename  : 'js/app.js'
	},
	module: {
		// yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev
		// yarn add style-loader css-loader --dev
		// yarn add extract-text-webpack-plugin@next --dev
		// yarn add sass-loader node-sass --dev
		// yarn add file-loader url-loader --dev
		// yarn add font-awesome 
		// yarn add webpack-dev-server --dev
		rules: [
			{
				test: /\.jsx$/,
				exclude: /(node_modules)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env','@babel/preset-react']
					}
				}
			},
			{
				test: /\.css$/,
				// use: ['style-loader', 'css-loader'],
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					use: "css-loader"
				}),
			},
			{
				test: /\.scss$/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					use: ["css-loader", "sass-loader"]
				}),
			},
			{
				test: /\.(png|jpg|jpeg|gif)$/i,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 8192,
							name : 'resource/[name].[ext]'
						}
					}
				]
			},
			{
         		test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
				use: [
					{
						loader  : 'file-loader',
						options : {
							name : 'resource/[name].[ext]'
						}
					}
				]
			},
		],
	},
	plugins: [
		// 处理 html 文件
		// 文档 https://github.com/jantimon/html-webpack-plugin#plugins
		new HtmlWebpackPlugin({
			title:'React-demo',
			template:'./src/index.html'
		}),
		// 独立 css 文件
		new ExtractTextPlugin("css/[name].css"),
	],
	devServer: {
		port: 8086
	},
}




